<!--
 * @Author: ChunLai
 * @Date: 2021-04-06 10:13:01
 * @LastEditTime: 2025-09-11 08:58:21
 * @Description: 安盛新结构---H17105
 * @FilePath: \02.bldinsure\src\views\index\feecount\FeeNewUiCount.vue
-->
<template>
  <div class="ms-form-modal check_plan">
    <div class="ms-pre-count-head">方案选择</div>
    <div class="main_box">
      <van-field :input-align="inputAlign" label="缴费期间" readonly>
        <template #input> 一次交清 </template>
      </van-field>
      <van-field :input-align="inputAlign" label="保险期间" readonly>
        <template #input> 1年 </template>
      </van-field>
      <template v-if="manRiskItem.isNewUiConfig">
        <van-field class="flex2line" label="投保计划" readonly>
          <template #input>
            <div class="flex2line-radios">
              <MsRadios
                :arrList="insurePlanArr"
                :curVal="apiKeyFields.planBigId"
                type="planBigId"
                labelName="name"
                @change="changMsRadio"
              />
            </div>
            <div class="flex2line-radios mt10">
              <MsRadios
                :arrList="planList"
                :curVal="apiKeyFields.planId"
                type="planId"
                @change="changMsRadio"
              />
            </div>
            <div
              class="mt10 duty-desc"
              v-html="getPlanDesc"
              v-if="getPlanDesc"
            ></div>
          </template>
        </van-field>
        <van-field class="flex2line" label="住院免赔额" readonly>
          <template #input>
            <MsRadios
              :arrList="zympeList"
              :curVal="apiKeyFields.zympe"
              type="zympe"
              @change="changMsRadio"
            />
          </template>
        </van-field>
        <!-- 附加保障 -->
        <div class="duty_mulit_box" v-if="dutysList.length > 0">
          <p class="duty_tt">附加保障(可多选)</p>
          <div class="duty_list">
            <div
              class="duty_item"
              :class="forbidClick(item) ? 'forbid_choose' : ''"
              v-for="(item, index) in dutysList"
              :key="`${item.keyName}${index}`"
            >
              <div class="duty_name">
                {{ item.label }}{{ item.label2 ? ` | ${item.label2}` : "" }}
              </div>
              <div class="duty_radios">
                <span
                  class="radio_item thin-border"
                  v-for="ele in item.radioList"
                  :key="ele.value"
                  :class="sureClick(ele, item) ? 'active' : ''"
                  @click="changeDutyRadio(ele, item)"
                >
                  {{ ele.label }}
                </span>
              </div>
              <div class="duty-desc" v-html="item.desc" v-if="item.desc"></div>
              <div
                class="duty-desc error"
                v-html="item.ruleWarn"
                v-if="item.ruleWarn && forbidClick(item)"
              ></div>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <van-field
          class="flex2line"
          label="投保计划"
          readonly
          v-if="manRiskItem.plans && manRiskItem.plans.length > 0"
        >
          <template #input>
            <div class="flex2line-radios">
              <MsRadios
                :arrList="manRiskItem.plans"
                :curVal="manRiskItem.planCode"
                type="planCode"
                @change="changMsRadio"
              />
            </div>
            <div
              class="mt10 duty-desc"
              v-html="getPlanDesc"
              v-if="getPlanDesc"
            ></div>
          </template>
        </van-field>
        <div
          class="duty_mulit_box"
          v-if="manRiskItem.dutys && manRiskItem.dutys.length > 0"
        >
          <p class="duty_tt">附加保障(可多选)</p>
          <div class="duty_list">
            <div
              class="duty_item"
              v-for="(item, index) in manRiskItem.dutys"
              :key="`${item.keyName}${index}`"
            >
              <div class="flx-ac duty_name">
                {{ item.label }}
              </div>
              <div class="duty_radios">
                <span
                  class="radio_item thin-border"
                  v-for="ele in insureList"
                  :key="ele.value"
                  :class="getDuty2Class(item, ele)"
                  @click="change2DutyRadio(item, ele.value)"
                >
                  {{ ele.label }}
                </span>
              </div>
              <div class="duty-desc" v-html="item.desc" v-if="item.desc"></div>
              <div
                class="duty-desc error"
                v-html="item.ruleWarn"
                v-if="item.ruleWarn"
              ></div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import MsRadios from "@/components/MsRadios";
import FieldDescMode from "@/views/count/components/FieldDescMode";
import appDits from "@/config/app.js";
export default {
  name: "FeeNewOldUiCount",
  components: {
    MsRadios,
    FieldDescMode,
  },
  data() {
    return {
      inputAlign: "right",
      zhuRiskObj: {},
      apiKeyFields: {},
      planList: [],
      zympeList: [],
      insurePlanArr: [],
      dutysList: [],
      insureList: appDits.insureList,
    };
  },
  computed: {
    ...mapGetters({
      mainInsu: "risks/mainInsu",
      applicant: "insert/applicant",
      bbrMultList: "insert/bbrMultList",
    }),
    manRiskItem() {
      return this.mainInsu[0];
    },
    getPlanDesc() {
      let res = "";
      if (this.planList.length > 0 && this.apiKeyFields.planId) {
        const obj2 = this.planList.find(
          (ele) => ele.value == this.apiKeyFields.planId
        );
        if (obj2 && obj2.content) {
          res = obj2.content;
        }
      }
      return res;
    },
  },
  created() {
    if (this.manRiskItem.isNewUiConfig) {
      const cacheCfg = this.manRiskItem;
      this.zhuRiskObj = cacheCfg;
      this.insurePlanArr = cacheCfg.insurePlanArr;
      this.zympeList = cacheCfg.zympeList;
      this.apiKeyFields = cacheCfg.apiKeyFields;
      this.setDutyList("init");
    }
  },
  mounted() {},
  methods: {
    changMsRadio(type, item) {
      if (type == "planCode") {
        let err = "";
        if (item.maxAge !== void 0) {
          const bbrAge = this.age;
          if (bbrAge * 1 > item.maxAge) {
            err = `被保人投保年龄大于${item.maxAge},不可选择${item.label}`;
          }
        }
        if (err) return this.$msAlert(err);
        this.compute2Fee(type, item.value);
      } else if (type == "zympe") {
        this.apiKeyFields.zympe = item.value;
        this.computeFee();
      } else if (type == "planBigId") {
        this.apiKeyFields.planBigId = item.value;
        this.setDutyList();
      } else if (type == "planId") {
        this.apiKeyFields.planId = item.value;
        this.setDutyList();
      }
    },
    forbidClick(dutyObj) {
      let res = false;
      if (!this.apiKeyFields[`${dutyObj.keyName}`]) {
        res = true;
      }
      return res;
    },
    sureClick(item2, dutyObj) {
      let res = false;
      if (dutyObj.keyBtnName) {
        const keyValue = this.apiKeyFields[`${dutyObj.keyName}`],
          keyName = this.apiKeyFields[`${dutyObj.keyBtnName}`];
        res = item2[`${keyName}`] == keyValue;
      } else {
        res = item2.value == this.apiKeyFields[`${dutyObj.keyName}`];
      }
      return res;
    },
    changeDutyRadio(ele, item) {
      let kval = ele.value;
      if (item.keyBtnName) {
        kval = ele[`${this.apiKeyFields[`${item.keyBtnName}`]}`];
      }
      this.apiKeyFields[`${item.keyName}`] = kval;
      if (item.keyName == "mjztemp") {
        if (this.apiKeyFields.mjztemp == "no") {
          this.apiKeyFields.mjz = "";
        }
      }
      if (item.keyName == "exzl") {
        if (this.apiKeyFields.exzl && this.apiKeyFields.exzl != "no") {
          this.apiKeyFields.ywtdyp = "";
          this.apiKeyFields.tdylqx = "";
        } else {
          this.apiKeyFields.ywtdyp = "no";
          this.apiKeyFields.tdylqx = "no";
        }
      }
      if (item.keyName == "ywtdyp") {
        if (this.apiKeyFields.ywtdyp) {
          if (this.apiKeyFields.ywtdyp == "no") {
            this.apiKeyFields.tdylqx = "";
            this.apiKeyFields.exzl = "no";
          } else {
            this.apiKeyFields.exzl = "";
            this.apiKeyFields.tdylqx = "no";
          }
        } else {
          this.apiKeyFields.exzl = "no";
        }
      }
      this.checkMultiDuty();
    },
    setDutyList(type = "") {
      const obj1 = this.insurePlanArr.find(
        (ele) => ele.value == this.apiKeyFields.planBigId
      );
      this.dutysList = obj1.fjbzKxArr || [];
      this.planList = obj1.codeList || [];
      const obj2 = this.planList.find(
        (ele) => ele.value == this.apiKeyFields.planId
      );
      if (!obj2) {
        this.apiKeyFields.planId = this.planList[0].value;
      }
      if (this.dutysList.length > 0) {
        this.checkMultiDuty(type);
      } else {
        this.computeFee();
      }
    },
    checkMultiDuty(type = "") {
      // mjztemp
      const as2_duty = this.dutysList.find((ele) => ele.keyName == "mjztemp"),
        as2_duty2 = as2_duty.radioList.find(
          (ele) => ele.value == this.apiKeyFields.mjztemp
        );
      if (!as2_duty2) {
        this.apiKeyFields.mjztemp = as2_duty.radioList[0].value;
      }
      // mjz
      if (this.apiKeyFields.mjztemp && this.apiKeyFields.mjztemp != "no") {
        const as3_duty = this.dutysList.find((ele) => ele.keyName == "mjz"),
          as3_duty2 = as3_duty.radioList.find(
            (ele) =>
              ele[`${this.apiKeyFields.mjztemp}`] == this.apiKeyFields.mjz
          );
        if (!as3_duty2) {
          this.apiKeyFields.mjz =
            as3_duty.radioList[0][`${this.apiKeyFields.mjztemp}`];
        }
      } else {
        this.apiKeyFields.mjz = "";
      }
      // exzl
      if (this.apiKeyFields.exzl && this.apiKeyFields.exzl != "no") {
        this.apiKeyFields.ywtdyp = "";
      }
      //  ywtdyp
      if (this.apiKeyFields.ywtdyp && this.apiKeyFields.ywtdyp != "no") {
        this.apiKeyFields.exzl = "";
      }
      // tdylqx
      if (this.apiKeyFields.ywtdyp == "no" || !this.apiKeyFields.ywtdyp) {
        this.apiKeyFields.tdylqx = "";
      }
      if (type != "init") {
        this.computeFee();
      }
    },
    computeFee() {
      this.$store.commit("risks/UPDATE_MAIN_ITEM", {
        apiKeyFields: this.apiKeyFields,
      });
      this.toCountApi();
    },
    /**常规责任选择*/
    getDuty2Class(dutyObj, btnObj) {
      const arr2 = dutyObj.value.split("-"),
        fdObj = this.manRiskItem.apiCodes.find((a) => a == arr2[0]);
      const hasIt = fdObj ? "1" : "0";
      return btnObj.value == hasIt ? "active" : "";
    },
    change2DutyRadio(item, btnValue) {
      // const codeValue = item.value;
      let arr = JSON.parse(JSON.stringify(this.manRiskItem.apiCodes));
      if (btnValue == "1") {
        /**存在互斥选项*/
        if (item.forbid) {
          arr = arr.filter((e) => item.forbid.indexOf(e) === -1);
        }
        const arr2 = item.value.split("-"),
          fdObj = arr.find((a) => a == arr2[0]);
        if (!fdObj) {
          arr = [...arr, ...arr2];
        }
      } else {
        arr = arr.filter((e) => item.value.indexOf(e) === -1);
      }
      this.compute2Fee("apiCodes", arr);
    },
    compute2Fee(type, value) {
      let obj = {};
      obj[type] = value;
      this.$store.commit("risks/UPDATE_MAIN_ITEM", obj);
      this.toCountApi();
    },
    toCountApi() {
      this.$forceUpdate();
      let err = "";
      if (
        this.applicant.idNum == "" ||
        this.applicant.sex == "" ||
        this.applicant.birthDate == ""
      ) {
        err = "请填写投保人信息";
      }
      if (err) {
        this.$store.commit("common/SET_FIELD_MEAN_CONT", {
          label: `规则校验`,
          desc: `${err}`,
        });
      }
      setTimeout(() => {
        this.$store.dispatch("risks/setRisks", {});
      }, 100);
    },
  },
};
</script>

<style lang="less" scoped>
.check_plan {
  width: 100%;
  padding: 0 5px 14px 5px;

  .main_box {
    border-radius: 4px;
    padding: 0 10px;
    margin-top: 4px;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
  }
}

.duty_mulit_box {
  padding: 10px 0;

  .duty_list {
    .duty_item {
      padding: 8px 0;
      &.forbid_choose {
        position: relative;
        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.1);
          z-index: 5;
        }
      }

      &:not(:first-child) {
        border-top: 1px solid #e6e6e6;
      }
      .duty_name {
        font-weight: 600;
        line-height: 18px;
        color: #303133;
        position: relative;
      }
    }
  }
}
.duty_radios {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 4px;
  .radio_item {
    width: calc((100% - 40px) / 4);
    height: 28px;
    line-height: 28px;
    text-align: center;
    background-color: #f7f7f7;
    color: #747474;
    font-size: 14px;
    padding: 0 5px;
    border-radius: 3px;
    margin: 4px 5px;
    &.thin-border {
      &::after {
        border: 1px solid #e5e5e5;
      }
      &.active {
        color: #f54040;
        background-color: #fff0f0;
        &::after {
          border: 1px solid #f54040;
        }
      }
    }
  }
}
.duty_box {
  margin-top: 5px;
}
.duty-desc {
  padding: 0 5px;
  color: #909399;
  font-size: 12px;
  margin-top: 5px;
  line-height: 1.3;
  &.error {
    color: #e6a23c;
  }
}
.duty_tt {
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
  font-family: MiSans;
  color: #303133;
}
/**vant配置文件内html样式*/
.ms-form-modal {
  /deep/.van-cell {
    padding: 5px 5px 5px 0;
    &::after {
      right: 0;
      left: 0;
    }
  }
  /deep/.van-field__label {
    span {
      line-height: 32px;
      color: #909399;
    }
  }
  /deep/.van-field__control:read-only {
    line-height: 32px;
  }
}
.flex2line {
  padding: 0 0 10px 0 !important;
  flex-direction: column;
  .ms_radios {
    justify-content: flex-start;
  }
  /deep/.van-field__control:read-only {
    flex-direction: column;
  }
  /deep/.ms_radios-item {
    width: calc((100% - 30px) / 3);
    height: 28px;
    line-height: 28px;
    margin-right: 5px;
    margin-left: 5px;
  }
  /deep/.van-field__label {
    span {
      font-weight: 600;
      color: #303133;
    }
  }
  &-radios {
    width: 100%;
    /deep/.ms_radios-item {
      flex: 1;
      margin-right: 5px;
      margin-left: 5px;
    }
  }
}
</style>
